<script setup lang="tsx">
import { nextTick, onUnmounted, reactive, ref } from 'vue';
import { UUID } from 'uuidjs';
import {
  getOuterPrintedCodeLeftList,
  getOuterRightTableDataDetails
} from '@/service/api/modules/code-management/printed-code';
import SearchBox from './modules/search.vue';

const leftPage = ref({
  pageNum: 1,
  pageSize: 200
});

const searchParams = ref<any>({
  prodNo: null,
  lotNo: null,
  printState: null,
  time: null
});
const isFirstSucess = ref(false);
const pagination = reactive({
  current: leftPage.value.pageNum,
  pageSize: leftPage.value.pageSize,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total, range) => {
    console.log('object :>> ', range);

    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    leftPage.value.pageNum = current;
    leftPage.value.pageSize = size;
    if (!isFirstSucess.value) return;
    getLeftTableData();
  }
});

const leftAlignId = ref(null);

const leftTableData = ref([]);

const rowSelection = ref([]);

const columnChecks = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 20,
    align: 'center',
    checked: true
  },
  {
    key: 'lotId',
    dataIndex: 'lotId',
    title: '生产批号',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'productName',
    dataIndex: 'productName',
    title: '产品型号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'qty',
    dataIndex: 'qty',
    title: '批次数量',
    width: 60,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printCount',
    dataIndex: 'printCount',
    title: '打码数量',
    width: 60,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printedCodeState',
    dataIndex: 'printedCodeState',
    title: '打码状态',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerCode',
    dataIndex: 'customerCode',
    title: '客户代码',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerName',
    dataIndex: 'customerName',
    title: '客户名称',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '下发时间',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);

const leftTableLoading = ref(false);

function getLeftTableData() {
  console.log('searchParams.value :>> ', searchParams.value);
  const { prodNo, lotNo, printState } = searchParams.value;
  const params: any = { prodNo, lotNo, printState, ...leftPage.value };
  if (searchParams.value.time?.[0]) {
    params.startTime = searchParams.value.time[0];
    params.endTime = searchParams.value.time[1];
  }
  leftTableLoading.value = true;
  getOuterPrintedCodeLeftList(params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item, index) => {
          item.index = index + 1;
          item.tableUuid = UUID.genV4().hexNoDelim;
        });
        pagination.total = data.total;
        leftTableData.value = data.list;
      }
    })
    .finally(() => {
      leftTableLoading.value = false;
      isFirstSucess.value = true;
    });
}

getLeftTableData();
function reset() {
  leftPage.value.pageNum = 1;
  pagination.current = 1;
  getLeftTableData();
}

function search() {
  leftPage.value.pageNum = 1;
  pagination.current = 1;
  getLeftTableData();
}

const rightTableLoading = ref(false);
const rightTableData = ref([]);
const rightTableColumns = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'pnlId',
    dataIndex: 'pnlId',
    title: 'PNL码',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printStatus',
    dataIndex: 'printStatus',
    title: '是否打码',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printedTime',
    dataIndex: 'printedTime',
    title: '打码时间',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'eqpId',
    dataIndex: 'eqpId',
    title: '打码设备',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  }
  // {
  //   key: 'innerCode',
  //   dataIndex: 'innerCode',
  //   title: '关联内层码',
  //   width: 200,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true
  // }
]);

const customRow = record => {
  return {
    style: {
      // 设置字体颜色
      // 'color': record.id === this.leftAlignId ? '#fff' : '',
      //  设置行背景色
      // 'background-color': record.lotId === leftAlignId.value ? 'rgba(86, 205, 243, 0.3)' : ''
      // 设置字体类型
      // 'font-family': 'Microsoft YaHei',
      // // 下划线
      // 'text-decoration': 'underline',
      // // 字体样式-斜体
      // 'font-style': 'italic',
      // // 字体加粗
      // 'font-weight': 'bold'
      background: record.tableUuid === leftAlignId.value ? '#BAEAFA' : ''
    },
    class: record.tableUuid === leftAlignId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      leftAlignId.value = record.tableUuid;
      rightTableLoading.value = true;
      getOuterRightTableDataDetails(record.lotId)
        .then(({ data, error }) => {
          if (!error) {
            data.forEach((item, index) => {
              item.index = index + 1;
            });
            rightTableData.value = data;
          }
        })
        .finally(() => (rightTableLoading.value = false));
    }
  };
};

const searchHeight = ref(42);

window.addEventListener('resize', () => {
  nextTick(() => {
    const ele = document.querySelector('.outer-printed-code .search-box');
    const height = ele?.clientHeight;
    searchHeight.value = height || 42;
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', () => {});
});
</script>

<template>
  <div
    class="jl-main-page outer-printed-code h-full h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
  >
    <SearchBox v-model:model="searchParams" class="search-box" @reset="reset" @search="search" />
    <ARow :gutter="[15, 8]" wrap class="w-full" :style="{ height: `calc(100% - ${searchHeight}px)` }">
      <ACol :span="12" class="h-full">
        <ACard
          :bordered="false"
          :body-style="{ flex: 1, overflow: 'hidden' }"
          class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
        >
          <template #extra>
            <TableColumnSetting v-model:columns="columnChecks" />
          </template>
          <STable
            ref="tableWrapperRef"
            :columns="columnChecks"
            :data-source="leftTableData"
            bordered
            size="small"
            :loading="leftTableLoading"
            row-key="tableUuid"
            :pagination="pagination"
            :custom-row="customRow"
            :scroll="{ x: 1500 }"
            class="h-full"
            :row-height="23"
          />
        </ACard>
      </ACol>
      <ACol
        :span="24"
        :md="24"
        :lg="24"
        :xl="12"
        :xxl="12"
        class="h-fullmin-h-500px h-full flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
      >
        <ACard
          :bordered="false"
          :body-style="{ flex: 1, overflow: 'hidden' }"
          class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
        >
          <template #extra>
            <TableColumnSetting v-model:columns="rightTableColumns" />
          </template>
          <STable
            ref="tableWrapperRef"
            :columns="rightTableColumns"
            :data-source="rightTableData"
            bordered
            size="small"
            :loading="rightTableLoading"
            row-key="pnlId"
            :pagination="false"
            :scroll="{ x: 'auto', y: 2000 }"
            class="h-full"
            :row-height="23"
          />
        </ACard>
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped></style>
